<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div class="ulbox">
        <div class="LBul">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div class="WZ_size_16 marginBottom10" style="font-weight: 700">
              基本信息
            </div>
            <van-image
              v-if="DDobj.orderStatus == 0"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../static/SY.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == -1"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../static/QX.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == 2"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../static/SH.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == 1"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../static/WC.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == 3"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../static/PJ.png')"
              mode=""
            >
            </van-image>
            <van-tag
              class="BHtag"
              v-if="DDobj.orderStatus == 4"
              type="primary"
              color="#ffe1e1"
              text-color="#ad0000"
            >
              <p class="yuan"></p>
              已驳回
            </van-tag>
          </div>
          <div class="LBli" style="display: flex; align-items: center">
            <div class="">
              <van-icon size="30" name="location" />
            </div>
            <div class="WZ_size_12 marginLeft5">
              {{ DDobj.orderLocation }}
            </div>
          </div>
          <van-divider
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
          >
          </van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="WZ_size_14">预约人</div>
            <div class="WZ_size_14">
              {{ DDobj.userName }}
            </div>
          </div>
          <van-divider
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
          >
          </van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="WZ_size_14">预约项目</div>
            <div class="WZ_size_14" style="display: flex; align-items: center">
              <div class="">
                {{ DDobj.orderType }}
              </div>
            </div>
          </div>
          <van-divider
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
          >
          </van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="WZ_size_14">下单时间</div>
            <div class="WZ_size_14">
              {{ DDobj.creationTime }}
            </div>
          </div>
          <van-divider
            v-if="DDobj.orderTime != ''"
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
          >
          </van-divider>
          <div
            v-if="DDobj.orderTime != ''"
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="WZ_size_14">预约时间</div>
            <div class="WZ_size_14">
              {{ DDobj.orderTime }}
            </div>
          </div>
          <van-divider
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
          >
          </van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="WZ_size_14">预约单号</div>
            <div class="WZ_size_14">
              {{ DDobj.orderNumber }}
            </div>
          </div>
          <van-divider
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
            v-if="
              DDobj.orderStatus != -1 &&
              DDobj.orderStatus != 1 &&
              DDobj.orderStatus != 3
            "
          ></van-divider>
          <div
            v-if="
              DDobj.orderStatus != -1 &&
              DDobj.orderStatus != 1 &&
              DDobj.orderStatus != 3
            "
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="WZ_size_14">订单二维码</div>
            <div class="WZ_size_14">
              <van-image
                class="img"
                radius="4"
                width="80"
                height="80"
                :src="qrCodeUrl"
                mode=""
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
          </div>
          <van-divider
            :style="{
              borderColor: '#999',
              margin: '15px 0',
            }"
          >
          </van-divider>
          <div
            class="WZ_size_16 marginBottom10"
            style="font-weight: 700"
            v-if="DDobj.detailList"
          >
            订单信息
          </div>
          <div class="" v-if="DDobj.detailList">
            <div v-for="(item, index) in DDobj.detailList" :key="index">
              <div class="XXli">
                <div class="XXli_left">
                  <van-image
                    class="img"
                    radius="4"
                    width="80"
                    height="80"
                    :src="item.picUrl"
                    mode=""
                  >
                  </van-image>
                </div>
                <div class="XXli_right">
                  <div class="paddingLeft10" style="width: 60%">
                    {{ item.name }}
                  </div>
                  <div class="">预约数：{{ item.qty }}</div>
                </div>
              </div>
              <van-divider
                :style="{
                  borderColor: '#999',
                  margin: '15px 0',
                }"
              >
              </van-divider>
            </div>
          </div>
          <div v-if="DDobj.orderEvaluateAdmin">
            <div class="title">
              <div class="marginBottom5 WZ_size_16" style="font-weight: bold">
                商家反馈
              </div>
              <div class="WZ_size_14">
                {{ DDobj.orderEvaluateAdmin.content }}
              </div>
            </div>
            <van-divider
              :style="{
                borderColor: '#999',
                margin: '15px 0',
              }"
            >
            </van-divider>
            <div
              class="WZ_size_16"
              style="margin: 5px 0 10px 0; font-weight: bold"
            >
              图片信息
            </div>
            <div v-if="backImgList.length > 0" style="display: flex">
              <div
                class="margin10 photo-item"
                v-for="(item, index) in backImgList"
                :key="index"
              >
                <van-image
                  radius="4"
                  width="100"
                  height="100"
                  :src="item"
                  mode=""
                >
                </van-image>
                <!-- <u--image
                :src="item"
                mode="widthFix"
                width="100px"
                height="100px"
              ></u--image> -->
              </div>
            </div>
            <div class="" v-else>暂无图片</div>
          </div>
        </div>
      </div>
      <div
        class="ulboxNext"
        v-if="DDobj.orderStatus == '1' || DDobj.orderStatus == '3'"
      >
        <div style="margin: 10px auto; font-weight: bold">
          <div class="WZ_size_14">服务评分</div>
          <div style="display: flex; justify-content: center">
            <van-rate
              v-model="score"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <div class="title">
          <div
            class="WZ_size_14"
            style="margin-bottom: 10px; font-weight: bold"
          >
            评价内容
          </div>
          <van-cell-group inset>
            <van-field
              v-model="description"
              rows="1"
              autosize
              type="textarea"
              placeholder="请输入评价内容"
            />
          </van-cell-group>
        </div>
        <div class="photo">
          <!-- <div class="WZ_size_14" style="margin: 5px 0 10px 0; font-weight: bold">
          评价图片
        </div>
        <div>
          <van-uploader
            v-model="fileList1"
            multiple
            max-count="3"
            :after-read="afterRead"
          />
        </div> -->
          <div class="btn">
            <van-button
              style="width: 100%"
              type="success"
              color="#39BCB4"
              @click="uploadConfirm"
              >{{ text }}</van-button
            >
          </div>
        </div>
      </div>
      <div class="ulboxNext" v-if="DDobj.orderStatus == '4'">
        <div style="margin: 10px auto; font-weight: bold">
          <div class="title">
            <div
              style="margin-bottom: 10px; font-weight: bold"
              class="WZ_size_14"
            >
              驳回原因
            </div>
            <van-field
              type="textarea"
              v-model="DDobj.orderExtend1"
              height="50"
              border="surround"
              disabled
              placeholder="暂无驳回原因"
            ></van-field>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import headerXX from "../components/title.vue";
import { getmoreRoute } from "../common/moreRouteList";
import { getOrderDetailList } from "@/api/realAssets/icsharedstation/DD/index.js";
import moment from "moment";
import QRCode from "qrcode";
export default {
  components: { headerXX },
  data() {
    return {
      title: "订单详情",
      arrayString: {},
      DDobj: {},
      qrCodeUrl: "",
      backImgList: [],
      fileList1: [],
      description: "",
      score: 0,
      text: "提交评价",
    };
  },
  created() {
    this.arrayString = JSON.parse(decodeURIComponent(this.$route.query.XX));
  },
  mounted() {
    this.getDD();
  },
  methods: {
    getDD() {
      let obj = {
        orderNumber: this.arrayString.orderNumber,
        postId: this.arrayString.postId,
        siteId: this.arrayString.siteId,
      };
      getOrderDetailList(obj).then((res) => {
        if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
          this.DDobj = res.data;
          this.generateQRCode();
          if (this.DDobj.orderLocation == "") {
            this.DDobj.orderLocation =
              JSON.parse(getmoreRoute())[0].postName + "员工驿站";
          }
          if (this.DDobj.orderEvaluateAdmin) {
            this.backImgList = this.DDobj.orderEvaluateAdmin.img.split(",");
          }
          if (this.DDobj.orderEvaluateUser) {
            let imgList = this.DDobj.orderEvaluateUser.img.split(",");
            this.fileList1 = imgList.map((item) => {
              return {
                status: "success",
                url: item,
                message: "",
              };
            });
            this.description = this.DDobj.orderEvaluateUser.content;
            this.score = this.DDobj.orderEvaluateUser.score;
            this.text = "确认修改";
          }

          if (this.DDobj.orderTime != "") {
            let orderTime = moment(this.DDobj.orderTime).format("YYYY-MM-DD");
            if (orderTime != "Invalid date") {
              this.DDobj.orderTime = orderTime;
            }
          }
        } else {
          Toast.fail("网络错误");
        }
      });
    },
    uploadConfirm() {
      let photoList = this.fileList1.map((item) => item.url);
      addServiceOrderUserEvaluate({
        orderId: this.arrayString.id,
        userName: this.arrayString.userName,
        content: this.description,
        img: photoList.join(","),
        score: this.score,
      })
        .then((res) => {
          Toast.success("评价成功");
          this.getDD();
        })
        .catch((err) => {
          Toast.fail("评价失败");
        });
    },
    generateQRCode() {
      setTimeout(async () => {
        try {
          this.qrCodeUrl = await QRCode.toDataURL(this.DDobj.id);
        } catch (err) {}
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../static/css/index.less";
@import "../static/css/GYcSS.less";
.pull-refresh {
  overflow: auto;
  color: #666;
}
.BHtag {
  width: 70px;
  height: 25px;
  box-sizing: border-box;
  overflow: hidden;
  // padding: 3px;
  .yuan {
    width: 5px;
    height: 5px;
    background: #ad0000;
    border-radius: 50%;
    margin: 0px 3px;
    margin-right: 8px;
  }
}
.ulbox {
  background: rgba(245, 245, 245, 1);
  padding: 10px;
  box-sizing: border-box;

  .LBul {
    background: #fff;
    //margin-top: 20rpx;
    border-radius: 10px;
    padding: 10px;
  }
}

.topXX {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0rpx auto;

  .top {
    font-size: 14px;
    color: rgb(255, 141, 26);
  }
}

.DI {
  position: fixed;
  z-index: 999;
  width: 90%;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -5px);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  background: rgba(245, 245, 245, 1);

  .DI_bottom {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgb(2, 117, 113);
    color: #fff;
    border-radius: 5px;
  }
}

.XXli {
  display: flex;
  align-items: center;

  .XXli_right {
    width: 100%;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
}

.ulboxNext {
  background: rgba(245, 245, 245, 1);
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 10px;
  border-radius: 10px;

  .btn {
    margin-top: 20px;
  }
}
</style>